<!--
 * @Description: 合同计划日历表
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-12 16:09:07
 * @LastEditTime: 2023-06-05 19:51:30
 * @FilePath: \cscec-pms-admin\src\views\construction\contractor\components\PlanBoardCalendar.vue
-->
<template>
  <div>
    <a-spin :spinning="loading">
      <a-calendar
        v-model="calendar"
        :header-render="headerRender"
        @panelChange="handlePanelChange"
      >
        <section
          slot="dateCellRender"
          slot-scope="value"
          class="events"
          @mouseenter="handleCellMouseEnter($event, calenderData[value.format('YYYY-MM-DD')])"
        >
          <template v-for="(item, index) in getList(value)">
            <section
              :key="index"
              :class="'class-'+item.statusLights"
              class="calender-section"
            >
              <p>{{ item.name }}</p>
              <p>{{ item.type }}</p>
              <img
                v-if="item.promptLights === 1 || item.promptLights === 2"
                :src="item.promptLights === 1 ? yellowLight : redLight"
                width="20"
                hight="20"
              >
              <p>{{ item.startTime }}——{{ item.endTime }}</p>
            </section>
          </template>
          <!-- 节点信息浮窗 -->
          <ul
            v-if="getList(value).length > 0"
            :style="{'right': getRight(value) + 'px'}"
            class="front-task-info"
          >
            <h3>{{ value.format('YYYY-MM-DD') }}</h3>
            <li
              v-for="el in getList(value)"
              :key="el.id"
            >
              <article>
                <p>{{ el.type }}</p>
                <section>
                  <span>{{ el.period }}天</span>
                  <span>{{ el.startTime }}-{{ el.endTime }}</span>
                </section>
                <section>
                  <template v-if="isIndividual === 1">
                    <img
                      v-if="el.promptLights === 1 || el.promptLights === 2"
                      :src="el.promptLights === 1 ? yellowLight : redLight"
                      width="20"
                      hight="20"
                    />
                    <i
                      v-else
                      :class="color[el.statusLights]"
                    ></i>
                  </template>
                  <span>{{ el.desc }}</span>
                </section>
              </article>
            </li>
          </ul>
          <!-- 节点信息浮窗 -->
        </section>
      </a-calendar>
    </a-spin>
  </div>
</template>
<script>
import contractor from '@/api/construction/contractor'
export default {
  name: 'PlanBoardCalendar',
  data() {
    return {
      // 加载
      loading: true,
      // 个人待办、总进度计划（0:个人,1:总进度）
      isIndividual: 1,
      // 开始/结束时间展示（0:开始,1:结束）
      isBegin: 0,
      // 当前日历面板时间
      calendar: this.moment(),
      // 日历数据
      calenderData: {},
      // 红灯
      redLight: require('@/assets/icons/redLight.png'),
      // 黄灯
      yellowLight: require('@/assets/icons/yellowLight.png'),
      // 节点维护显示隐藏
      nodeMaintainVisible: false,
      // 节点完成数据
      data: {},
      // 节点颜色
      color: {
        0: 'class-slider-0',
        1: 'class-slider-1',
        2: 'class-slider-2',
        3: 'class-slider-3',
        4: 'class-slider-4'
      },
      // 可视区域宽度
      clientWidth: 0
    }
  },
  computed: {
    btn1() {
      return this.isIndividual === 1 ? '(展示个人待办)' : '(展示总进度计划)'
    },
    btn2() {
      return this.isBegin === 1 ? '(以结束时间展示)' : '(以开始时间展示)'
    }
  },
  mounted() {
    this.clientWidth = document.body.clientWidth
    this.getData()
  },
  methods: {
    /**
     * @description: 自定义头
     * @param {object} object 头部参数
     * @return {void} 接口Promise
     */
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0
      const end = 12
      const monthOptions = []
      const current = value.clone()
      const localeData = value.localeData()
      const months = []
      for (let i = 0; i < 12; i++) {
        current.month(i)
        months.push(localeData.monthsShort(current))
      }
      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        )
      }
      const month = value.month()
      const year = value.year()
      const options = []
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>
        )
      }
      return (
        <div class="plan-board-calendar-header">
          <a-select
            dropdownMatchSelectWidth={false}
            class="plan-board-calendar-header-select"
            onChange={(newYear) => {
              const now = value.clone().year(newYear)
              onChange(now)
            }}
            value={String(year)}
          >
            {options}
          </a-select>
          <a-select
            dropdownMatchSelectWidth={false}
            class="plan-board-calendar-header-select"
            value={String(month)}
            onChange={(selectedMonth) => {
              const newValue = value.clone()
              newValue.month(parseInt(selectedMonth, 10))
              onChange(newValue)
            }}
          >
            {monthOptions}
          </a-select>
          <a-button
            onClick={() => {
              const now = this.moment()
              onChange(now)
            }}
          >
            回到当月
          </a-button>
          {/* <div
            class="plan-board-calendar-header-btn btn1"
            onClick={() => {
              this.isIndividual === 1 ? (this.isIndividual = 0) : (this.isIndividual = 1)
              this.getData()
            }}
          >
            <span>切换</span>
            <p>{this.btn1}</p>
          </div> */}
          {this.isIndividual === 1 ? (
            <div
              class="plan-board-calendar-header-btn btn1"
              onClick={() => {
                this.isBegin === 1 ? (this.isBegin = 0) : (this.isBegin = 1)
                this.getData()
              }}
            >
              <span>切换</span>
              <p>{this.btn2}</p>
            </div>
          ) : (
            ''
          )}
        </div>
      )
    },
    /**
     * @description: 刷新
     * @return {void}
     */
    refresh(){
      this.getData()
      this.$emit('synchronousUpdate')
    },
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    getData(calendar = this.calendar) {
      this.loading = true
      this.calenderData = {}
      contractor.contractPlanCalendar({
        calendarDate: calendar.format('YYYY-MM'),
        projectId: this.$route.query.projectId + '',
        showContent: this.isBegin,
        showType: this.isIndividual
      })
        .then(({ code, data }) => {
          if (code === 200) {
            data.forEach(({ workTime, childrenWork }) => {
              this.$set(this.calenderData, workTime, {
                list: childrenWork,
                right: -470
              })
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 获取数据
     * @param {object} date 面板时间
     * @return {void}
     */
    handlePanelChange(date) {
      this.getData(date)
    },
    // /**
    //  * @description: 面板点击
    //  * @param {object} data 面板数据
    //  * @return {void}
    //  */
    // handlePanelClick({ id, statusCode }) {
    //   // 节点状态(0：待进行/1：正进行/2：审批中/3：逾期未完成/4：按期完成/5：逾期完成)
    //   const list = [2, 4, 5]
    //   this.visible = true
    //   this.data = {
    //     id,
    //     nodeStatus: statusCode,
    //     isIndividual: this.isIndividual,
    //     type: list.includes(statusCode) ? 'detail' : 'update'
    //   }
    // },
    /**
     * @description: 获取日历日期数据列表
     * @param {string} date 日历日期
     * @return {array}
     */
    getList(date) {
      return this.calenderData[date.format('YYYY-MM-DD')]?.list || []
    },
    /**
     * @description: 获取日历日期节点浮窗偏移
     * @param {string} date 日历日期
     * @return {array}
     */
    getRight(date) {
      return this.calenderData[date.format('YYYY-MM-DD')]?.right ?? 0
    },
    /**
     * @description: 单元格鼠标移入
     * @param {event} e 鼠标事件对象
     * @param {object} record 单元格数据
     * @return {void}
     */
    handleCellMouseEnter(e, record) {
      let width = this.clientWidth - (e.clientX - e.offsetX + e.target.clientWidth + 490)
      if (width < 0) {
        record.right = e.target.clientWidth + 15
      } else {
        record.right = -470
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .ant-fullcalendar-header {
  text-align: left;
  .ant-radio-group label {
    display: none;
  }
}
.plan-board-calendar-header {
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.plan-board-calendar-header-select {
  margin-right: 10px;
}
@{deep} .ant-fullcalendar-content {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #999;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  p {
    margin-bottom: 0;
  }
  .calender-section {
    border-radius: 3px;
    padding: 3px;
    margin: 5px 0;
    position: relative;
  }
}

.plan-board-calendar-header-btn {
  border: 1px solid #d9d9d9;
  text-align: center;
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  &:hover {
    border: 1px solid #1890ff;
    color: #1890ff;
  }
  p {
    margin: 0;
  }
}
.btn1 {
  margin-left: auto;
}
.class-0 {
  background-color: #d1d1d1;
}
.class-1 {
  background-color: #fff;
}
.class-2 {
  background-color: #f85c62;
}
.class-3 {
  background-color: #1dc682;
}
.class-4 {
  background-color: #ffced0;
}
.events:hover {
  .front-task-info {
    display: block;
  }
}
.front-task-info {
  position: absolute;
  width: 490px;
  max-height: 360px;
  z-index: 1;
  top: 0px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px;
  background-color: #fff;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  display: none;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    background: #ccc;
  }
  h3{
    font-weight: normal;
  }
  li {
    text-align: left;
    margin-bottom: 10px;
    article {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      padding: 1em;
      white-space: normal;
      p {
        margin: 0;
      }
      section {
        margin-top: 5px;
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
        }
        span:nth-of-type(1) {
          margin-left: 0;
        }
        img {
          margin-right: 10px;
          width: 16px;
          height: 16px;
        }
        i {
          display: inline-block;
          width: 24px;
          height: 14px;
          margin-right: 10px;
        }
        b {
          margin-left: auto;
          font-weight: normal;
          display: flex;
          align-items: center;
          span{
            display: flex;
            align-items: center;
            margin: 0;
          }
          i {
            display: inline-block;
            width: 1px;
            height: 14px;
            background-color: #1890ff;
            margin: 0 5px;
          }
        }
      }
    }
  }
  li:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}
</style>
